<template>
  <div class="register-container">
    <AccountForm
      title="注册"
      wrapperClassName="register"
      @submit="handleSubmit"
    >
      <Input
        name="username"
        label="用户名"
        v-model="form.username"
        required
        :disabled="submit_success"
      />
      <Input
        name="nickname"
        label="昵称"
        v-model="form.nickname"
        :disabled="submit_success"
      />
      <Input
        name="password"
        type="password"
        label="密码"
        v-model="form.password"
        required
        :disabled="submit_success"
      />
      <Input
        name="rpassword"
        type="password"
        label="确认密码"
        v-model="form.rpassword"
        required
        :disabled="submit_success"
      />
      <Button
        class="sign-up"
        color="#00c7cd"
        label="注册"
        :disabled="
          !form.username ||
            !form.password ||
            !form.rpassword ||
            !!submiting ||
            submit_success
        "
        @click="handleSubmit"
      >
        <Icon
          v-if="submiting"
          class="login-loading"
          slot="before"
          name="loading"
        ></Icon>
      </Button>
    </AccountForm>
  </div>
</template>

<script>
import AccountForm from "@/components/AccountForm.vue";
import Input from "@/components/Input.vue";
import Button from "@/components/Button.vue";
import Icon from "@/components/Icon.vue";
import Http from "@/utils/Http";
import Cookie from "js-cookie";

export default {
  name: "register",
  components: { AccountForm, Input, Button, Icon },
  data() {
    return {
      form: {
        nickname: "",
        username: "",
        password: "",
        rpassword: ""
      },
      submiting: false,
      submit_success: false,
      message: "",
      error: ""
    };
  },
  methods: {
    toLogin() {
      const appid = this.$route.query.appid || Cookie.get("appid") || "";
      this.$router.replace(`/?appid=${appid}`);
    },
    async handleSubmit() {
      this.submiting = true;
      try {
        const { data } = await Http.post("/register", this.form);
        this.$Modal.success({
          title: "操作成功",
          content: data.message,
          closable: false,
          onOk: this.toLogin
        });
        this.submit_success = true;
      } catch (err) {
        const error = err.data.message || "注册失败";
        this.submit_success = false;
        this.$Modal.error({
          title: "操作失败",
          content: error,
          closable: false
        });
      }
      this.submiting = false;
    }
  }
};
</script>

<style lang="less">
@import "../assets/common.less";

.register-container {
  overflow: hidden;
  height: 100%;

  #error,
  #message {
    font-size: 0.8em;
    color: #fff;
  }

  #error {
    color: #ff4141;
  }

  .sign-up {
    margin-top: 40 / @fontsize * 1em;

    &:disabled {
      border-color: #ccc !important;
      color: #ccc !important;
    }

    @keyframes login-loading {
      0% {
        transform: rotate(0);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    .login-loading {
      width: 1em;
      height: 1em;
      animation: login-loading 2s infinite linear;
    }
  }
}
</style>
